<template>
	<view class="bg">
		<view class="bg-h">
			<view class="head" @click="tologin">
				<image :src='user.img' alt='Image' class="head-img"></image>
			</view>
		</view>
		<view class="bg-t">
			<view class="infos" style="margin-top: 15%;">
				<view class="info_h">
					<uni-icons type="email-filled" size="30" color="#66b0fc"></uni-icons>
					<span>已绑定</span>
				</view>
				<view class="info_h" @click="upload_head">
					<uni-icons type="person" size="30" color="#66b0fc"></uni-icons>
					<span>已上传</span>
				</view>
			</view>
		</view>
	</view>
	<view class="menu">
		<view class="user_menu" v-for="(item,index) in usermenu" :key="index" @click="topage(index)">
			<view class="menu-info" style="margin-bottom: 20px;">
				{{ item.name  }}
			</view>
			<view class="inter">
				<uni-icons type="right" size="20"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.islogin = uni.getStorageSync('token')
		},
		onLoad() {
			this.getuser()
		},
		data() {
			return {
				usermenu: [{
					name: "修改信息"
				}, {
					name: "识别历史"
				}, {
					name: "关于我们"
				}, {
					name: "意见反馈"
				}],
				user: {}
			};
		},
		methods: {
			topage(index) {
				if (index === 0) {
					uni.navigateTo({
						url: "../../users/users"
					})
				} else if (index === 1) {
					uni.navigateTo({
						url: "../../history/history"
					})
				} else if (index === 2) {
					uni.navigateTo({
						url: "../../about/about"
					})
				} else {
					uni.navigateTo({
						url: "../../feedback/feedback"
					})
				}
			},
			tologin() {
				let islogin = true
				if (islogin) {
					uni.showModal({
						title: "确定注销？",
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "../../login/login"
								})
								uni.removeStorageSync('token')
							} else if (res.cancel) {
								console.log("取消")
							}
						}
					})
				}
			},
			getuser() {
				//获取用户信息
				uni.request({
					url: "http://localhost:8000/sign/get",
					method: 'GET',
					data: {
						token: uni.getStorageSync('token')
					},
					//设置请求头
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.user = res.data.user_data
							if (this.user.img !== "") {
								this.user.img = this.base64ToBlobUrl(res.data.user_data.img)
							} else {
								this.user.img = 'https://pic.616pic.com/ys_bnew_img/00/05/09/Ewz0Ve3BTc.jpg'
							}
						}
					}
				})
			},
			base64ToBlobUrl(base64String, mimeType = "application/octet-stream") {
				// 将 Base64 字符串解码为二进制数据
				const binaryData = Uint8Array.from(atob(base64String), c => c.charCodeAt(0));

				// 创建 Blob 对象
				const blob = new Blob([binaryData], {
					type: mimeType
				});

				// 通过 URL.createObjectURL 创建 Blob 的 URL
				const blobUrl = URL.createObjectURL(blob);

				return blobUrl;
			},
			upload_head() {
				//上传文件逻辑
				uni.chooseImage({
					//最大照片数
					count: 1,
					//源文件
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意，camera掉拍照，album是打开手机相册
					success: async (res) => {
						const imgurl = res.tempFilePaths[0]
						await uni.uploadFile({
							url: 'http://localhost:8000/sign/head', //服务器地址
							fileType: "image", //ZFB必填,不然报错
							filePath: res.tempFilePaths[0], //这个就是我们上面拍照返回或者先中照片返回的数组
							name: 'image',
							formData: {
								'token': uni.getStorageSync('token')
							},
							success: (response) => {
								//此处存在bug，后续连接前后端之后来继续改
								// bug主要问题是后端返回JSON被识别成立String,或许换后端语言解决(
								// 后期换python继续测试,最终版本是python)
								uni.showToast({
									title: "上传成功",
									duration: 2000,
								})
								location.reload();

							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 300px;

		.bg-h {
			width: 100%;
			height: 300px;
			background-color: #66b0fc;
			display: flex;
			justify-content: center;

			.head {
				width: 100px;
				height: 100px;
				margin-top: calc(100vh * 0.12);
				border-radius: 100%;
				z-index: 4;

				.head-img {
					width: 100px;
					height: 100px;
					border-radius: 100%;
				}
			}
		}

		.bg-t {
			position: absolute;
			top: 20%;
			width: 100%;
			height: 200px;
			// border-radius: 100% 100% 0 0;
			z-index: 3;
			background-color: #f5f5f5;
			// opacity: 0.9;

			.infos {
				width: 100%;
				display: flex;

				.info_h {
					width: 50%;
					height: 100px;
					text-align: center;
					font-size: 17px;
					background-color: #f5f5f5;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: #66b0fc;
				}

			}
		}
	}

	.menu {
		width: 100%;
		height: 300px;
		margin-top: 60px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.user_menu {
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			border-bottom: solid 1px #bcbcbc;
		}
	}
</style>